<template>
    <div>
        <h2 style="color: gray;">申请信息</h2>
        <el-divider></el-divider>

        <!-- 详情 -->
        <template v-if="details">
            <el-button type="primary"  @click="$router.push(`/htlogin/userlist`)" plain>返回</el-button>
            <br>
            <br>
            <el-descriptions title="申请信息" direction="vertical" :column="4" border>
                <el-descriptions-item label="姓名">{{details.name}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{details.phone}}</el-descriptions-item>
                <el-descriptions-item label="居住地" :span="2">{{details.region}}</el-descriptions-item>
                <el-descriptions-item label="职位" >{{details.position}}</el-descriptions-item>
                <el-descriptions-item label="是否自愿">{{details.isno}}</el-descriptions-item>
                <el-descriptions-item label="凭证">
                    <div class="demo-image__preview">
                        <el-image 
                            style="width: 100px; height: 100px"
                            :src="url" 
                            :preview-src-list="srcList">
                        </el-image>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="申请理由" :span="2">{{details.reason}}</el-descriptions-item>
            </el-descriptions>
            
        </template>
        <template v-else>
            <el-empty>
                <el-button type="primary"  @click="$router.push(`/htlogin/userlist`)" plain>返回</el-button>
            </el-empty>
        </template>
        
        
    </div>
</template>

<script>
import httpApi from '@/http';

    export default {
        data(){
            return{
                details:[],
                // 获取参数id，加载当前选中的用户的详细信息（发请求）
                id:this.$route.params.id,
                //图片
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
            }
        },
        methods:{
            detailslist(){
                // console.log("id:",id);
                httpApi.ApplyApi.listByApplyId({apply_id:this.id}).then(res =>{
                    console.log("申请表详情",res);
                    this.details = res.data.data[0]
                    // this.srcList = this.details.img
                    // console.log(this.details);
                })

            },
           
        },
        mounted(){
            this.detailslist()
        }
    }
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-item__content{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 30px;
}
</style>